import { useState } from "react";
import Transition from "@/components/Transition";
import ExclamationIcon from "@/assets/icons/exclamation.svg?jsx";
import XIcon from "@/assets/icons/x.svg?jsx";

export default function Sampling() {
  const [show, setShow] = useState(false);
  return (
    <div className="absolute right-0 top-0">
      <button className="p-2" onClick={() => setShow(!show)}>
        <ExclamationIcon />
      </button>
      <Transition
        show={show}
        beforeEnterClass="opacity-0 scale-95"
        enteringClass="transition-all duration-200"
        enteredClasss="opacity-100 scale-100"
        beforeLeaveClass="opacity-100 scale-100"
        leavingClass="transition-all duration-200"
        leftClass="opacity-0 scale-95"
        unmountOnHide
      >
        <div className="absolute left-[calc(100%_+_4px)] top-0 w-[150px] rounded bg-[#131313] p-2 text-white">
          <button
            className="absolute right-0 top-0 p-1"
            onClick={() => setShow(false)}
          >
            <XIcon height={12} width={12} />
          </button>
          <div className="border-b pb-2 pt-5 text-center text-sm">
            采样&信号
          </div>
          <ul className="mt-4 text-sm">
            {Array(5)
              .fill(0)
              .map((e, i) => (
                <li key={i} className="py-1">
                  <span className="mr-8">采样温度</span>
                  <span>35.0</span>
                </li>
              ))}
          </ul>
        </div>
      </Transition>
    </div>
  );
}
